import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  Image,
  Platform
} from 'react-native';

import TImage from '../../components/TImage';
import NewsConstants from '../../common/NewsConstants';
import SizeUtils from '../../common/SizeUtils';
import BaseItem from '../common/BaseItem';
import {DateUtils} from '../../utils/Utils';
import CommonStyles from '../../common/CommonStyles';
import Config from '../../config';
import NewsVideoView from './NewsVideoView';
import ToastUtils from '../../common/ToastUtils';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import PostRequestLikeAction from '../../actions/post/PostRequestLikeAction';

export default class NewsListItemView extends BaseItem {
  constructor(props) {
    super(props);
    this.state={
      readers_num:this.props.data.readers_num,
      likers_num:this.props.data.likers_num,
      is_liked:this.props.data.is_liked
    };
  }
  componentWillUpdate(nextProps, nextState) {
    if (nextProps.data.likers_num!==nextState.likers_num) {
      nextState.likers_num=nextProps.data.likers_num||0;
      nextState.is_liked = (nextState.is_liked===1?0:1)
    }
    if (nextProps.data.readers_num!==nextState.readers_num) {
      nextState.readers_num=nextProps.data.readers_num||0;      
    }

    if(nextState.needRefresh || nextState.updateByLike) {
      nextState.needRefresh = false;
      nextState.updateByLike = false;
      // this._requestData();
      this.props.dRefresh&&this.props.dRefresh();
      if(nextState.statusText != "") {
        ToastUtils.show(nextState.statusText);
        nextState.statusText = "";
      }
    }
    if(nextState.statusText && nextState.statusText != "") {
      ToastUtils.show(nextState.statusText);
      nextState.statusText = "";
    }
  }
  //data.show_type 1图片左边 0, 2图片下边 3图片右边 当 show_type == 1 或者 3的时候，只能显示一张图，无法显示3张图
  render() {
    return (
        <TouchableOpacity activeOpacity={0.3} underlayColor="#eeeeee"
          onPress={this._onPressItem.bind(this)}
          style={[{backgroundColor:"#ffffff",
          width:SizeUtils.getWindowSize().width,
          paddingTop:SizeUtils.translateDesignHeightToCode(40),
          paddingBottom:SizeUtils.translateDesignHeightToCode(40),
          borderBottomWidth:this.props.data.title ? SizeUtils.translateDesignNumToCode(3) : 0,
          borderColor:"#eeeeee",
        }, this.props.style]}>
            {this._renderContent()}
        </TouchableOpacity>
    )
  }

  _renderContent() {
    if(this.props.data.video_url.length<1&&(this.props.data.show_type === 1 || this.props.data.show_type === 3)) {
      var flexDirection = this.props.data.show_type === 1 ? "row" : "row-reverse";
      var paddingLeft = this.props.data.show_type === 1 ? 20 : 0;
      var paddingRight = this.props.data.show_type === 1 ? 0 : 20;
      let noImage = !this.props.data.image_urls || this.props.data.image_urls.length == 0;
      return (
        <View style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(40),
            flexDirection:flexDirection,
            paddingLeft:paddingLeft }}>
          {this._renderImagesLeftOrRight(this.props.data)}
          <View style={{flex:1, flexDirection:"column",justifyContent:"space-between",
              paddingLeft:SizeUtils.translateDesignWidthToCode(20),
              paddingRight:SizeUtils.translateDesignWidthToCode(paddingRight),
              paddingBottom:SizeUtils.translateDesignHeightToCode(noImage?0:10),
            }}>
            <Text numberOfLines={2}
                style={[CommonStyles.primaryText, {marginBottom:SizeUtils.translateDesignHeightToCode(noImage?20:0),color:'#000',fontSize:SizeUtils.translateFontSizeToCode(28),}]}>
                  {this.props.data.title}
              </Text>
            {this._newsBottomView(this.props.data)}
          </View>
        </View>
      )
    }
    else {
      return (
        <View style={{flexDirection:"column"}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32),paddingLeft:SizeUtils.translateDesignWidthToCode(20), color:"#000000", fontWeight:"bold"}}>
            {this.props.data.title}
          </Text>
          {this._renderImagesBottom(this.props.data)}
          {this._newsBottomView(this.props.data,true)}
        </View>
      )
    }
  }
  _newsBottomView=(data,isLeft)=>(
    <View style={{flexDirection:'row',paddingTop:SizeUtils.translateDesignHeightToCode(10),
        paddingLeft:SizeUtils.translateDesignWidthToCode(isLeft?20:0),
        paddingRight:SizeUtils.translateDesignWidthToCode(isLeft?20:0),alignItems: 'center',}}>
        <Text
            style={[CommonStyles.secondaryText, {flex:1,fontSize:SizeUtils.translateFontSizeToCode(26),
                }]}>
            {this._getDateSource(this.props.data)}
        </Text>
        <View style={{flexDirection:'row',alignItems: 'center',}}>
        {/**<TImage source={require("../../../resource/images/home/kan.png")} 
            style={{ width:40,height:40,}}/>
        <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(26)}]}>
          {' '+this.state.readers_num}
        </Text>
        <View style={{marginLeft:Platform.OS === "android"?5:0,flexDirection:'row',alignItems: 'center',}} onPress={()=>{this._sendLikeAction();}}>
          <TImage source={require("../../../resource/images/home/zan.png")} 
            style={{marginLeft:10,width:30,height:30,}}/>
          <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(26)}]}>
            {' '+this.state.likers_num}
          </Text>
        </View>**/}
        <Text  style={[CommonStyles.secondaryText,{marginLeft:5,fontSize:SizeUtils.translateFontSizeToCode(26)}]}>
          {DateUtils.formatActivity1(this.props.data.posted_at)}
        </Text>
      </View>
    </View> 
  );
  _sendLikeAction() {
    new PostRequestLikeAction().call(this, this.props.data);
  }
  chageBrowse(read,like){
    console.log(read,like)
    this.setState({
      readers_num:read,
      likers_num:like
    });
  }
  _onPressItem() {
    // if(this.props.data.tag == NewsConstants.type_shipin) {
    //   new CommonShowViewFullScreenAction().call(this, {component:NewsVideoView, data:this.props.data})
    // }
    // else {
      this.gotoPage(Config.pages.news_content, {...this.props.data,chageBrowse:this.chageBrowse.bind(this)});
    // }
  }

  _renderImagesLeftOrRight(data) {
    if(!data.image_urls || data.image_urls.length == 0) {
      return (
        <View style={{}}>
        </View>
      )
    }
    else {
      return (
        <TImage source={{uri:data.image_urls[0]}} style={{width:220, height:140}}
          isMini={true} miniSize={"mini500"} />
      )
    }
  }

  _renderImagesBottom(data) {
    if(!data.image_urls || data.image_urls.length == 0) {

    }
    else if(data.image_urls.length < 3) {
      return this._renderOneImageBottom(data);
    }
    else if(data.image_urls.length == 3) {
      return (
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(32), flexDirection:"row",
            paddingLeft:SizeUtils.translateDesignWidthToCode(20),
            width:SizeUtils.translateDesignWidthToCode(204 * 3 + 30 * 2), justifyContent:"space-around"}}>
          {this._renderThreeImageBottom(data)}
        </View>
      );
    }
  }

  _renderText(data) {
    // return <Text></Text>
    // return(
    //   <View style={{height:SizeUtils.translateDesignHeightToCode(30)}}>
    //   </View>
    // )
  }

  _renderOneImageBottom(data) {
    return (
      <View style={{marginTop:SizeUtils.translateDesignHeightToCode(32),}}>
        <Image source={{uri:data.image_urls[0]}} style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().width*0.5}}
          resizeMode={"cover"} />
        {this._renderPlayButton(data)}
      </View>
    )
  }

  _renderPlayButton(data) {
    if(data.tag == 3) {
      return (
        <View style={{position:"absolute", top:0, left:0,right:0,bottom:0,
          backgroundColor:'#f000',justifyContent:"center", alignItems:"center"}}>
          <TImage source={require("../../../resource/images/news/play.png")} style={{width:72, height:72}} />
        </View>
      )
    }
  }

  _renderThreeImageBottom(data) {
    return data.image_urls.map((url, index) => {
      return <TImage key={index} source={{uri:url}} style={{width:204, height:140}}
        isMini={true} miniSize={"mini200"} resizeMode={"contain"}/>
    })
  }

  _getDateSource(data) {
    if(data.source) {
      return data.source;
    }
    return "";
  }
}
